<template>
  <div>
    <!-- 图片回答 -->
    <div class="c-flexw-wrap c-flex-row" v-if="uploadImgList.length>0">
      <div v-for="(item,index) in uploadImgList" :key="index" class="c-ww160 c-hh160 c-mb30 c-flex-row c-flex-center c-p " :class="(index+1)%3==0?'':'c-mr32'" >
        <div @click="delUploadImage(index)" class="iconfont c-fs12 c-fc-white del-img">&#xe61b;</div>
        <img @click="clickPreviewImage(item.content)" class="c-ww160 c-hh160 c-br20" :src="$addXossFilter(item.url)" alt="" />
      </div>
    </div>
    <div class="c-br16 c-bd1-mgray c-ww80 c-hh80 c-flex-row c-aligni-center c-justify-center c-p">
      <div @click="clickAnswerPic(index)" class="iconfont c-fs28 c-fc-gray">&#xe75e;</div>
      <input class="c-pa c-opacity0 c-p-t0 c-p-l0 c-ww80 c-hh80 c-fs10" v-if="!isWeiXin" ref="uploadImg" name="file" type="file" accept="image/*" @change="clickAnswerPic($event,index)" />
    </div>
    <div class="c-fs22 c-fc-gray c-mt10">拍照/截屏/上传图片（最多上传9张图片）</div>
  </div>
</template>
<script>
import {utilJs, wxUtilJs } from "@/utils/common.js";
let serverIdImgArr = []; //上传图片的serverID
let imgData = {};
export default {
  name: "clockPic",
  props: {
    uploadImgList: {
      type: Array,
      default: []
    },
    formLindex: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      isWeiXin : utilJs.isWeiXin() && utilJs.isMobileUserAgent()
    };
  },
  watch: {},
  mounted() {
    //获取阿里云签名，除了微信浏览器以外
    if (!this.isWeiXin) {
      utilJs.getAliSign(`${global.apiurl}imageSign`, (res) => {
        imgData = res;
      });
    }
  },
  methods: {
    //点击图片放大预览
    clickPreviewImage(imgUrl) {
      if (!imgUrl) {
        return;
      }
      let imgArr = [];
      for (let key of this.uploadImgList) {
        imgArr.push(key.url);
      }
      let imgData = {
        current: imgUrl, // 当前显示图片的http链接
        urls: imgArr
      }
      wxUtilJs.previewImage(imgData)
    },
    //删除上传的图片
    delUploadImage(index) {
      this.uploadImgList.splice(index, 1);
      this.pusDate()
    },
    //点击回答图片
    clickAnswerPic(event) {
      if (this.uploadImgList.length >= 9) {
        this.$showCjToast({
          text: "图片最多只能传9张",
          type: "warn",
          time: 1500
        });
        return;
      }
      if (this.isWeiXin) {
        wxUtilJs
          .chooseImage({
            count: 9 - this.uploadImgList.length, // 默认9
            sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ["album", "camera"] // 可以指定来源是相册还是相机，默认二者都有
          })
          .then((localIds) => {
            this.$loading.show({
              text: "上传中..."
            });
            serverIdImgArr = [];
            //获取剩余能传多少张图片，若已选的图片数量大于剩余数。则只传剩余数量的图片
            let residueLength = 9 - this.uploadImgList.length;
            if (localIds.length > residueLength) {
              localIds.length = residueLength;
            }
            this.wxUploadImg(localIds, localIds.length - 1);
          });
      } else {
        utilJs.imgUpload(
          event.target.files,
          imgData,
          "clock",
          (res) => {
            let urlObj = {
              url: res
            };
            this.uploadImgList.push(urlObj);
            this.pusDate()
          },
          (fRes) => {}
        );
      }
    },

    //上传图片到微信-----IOS不能一次性传多张，只好递归传
    wxUploadImg(localIds, localIdsLength) {
      wxUtilJs
        .uploadImage(
        {
          localId: localIds[localIdsLength]
        },
          true
        )
        .then((res) => {
          serverIdImgArr.push(res);
          if (localIdsLength > 0) {
            this.wxUploadImg(localIds, --localIdsLength);
          } else {
            this.syncUploadPic(serverIdImgArr);
          }
        });
    },

    //上传图片到服务器
    syncUploadPic(serverIdArr) {
      utilJs.postMethod(
        global.apiurl + "signCard/downWxImg ",
        {
          serverId: JSON.stringify(serverIdArr),
          mediaType: 2
        },
        (res) => {
          this.$loading.hide();
          for (let key of res) {
            if (this.uploadImgList.length >= 9) {
              break;
            }
            let urlObj = {
              url: key
            };
            this.uploadImgList.push(urlObj);
            this.pusDate()
          }
        },
        (failRes) => {
          this.$loading.hide();
        }
      );
    },
    pusDate() {
      this.$emit('changeVal', this.formLindex, this.uploadImgList)
    }
  },
  destroyed() {
  }
};
</script>

<style scoped>
.del-img {
  position: absolute;
  top: 0rem;
  right: 0rem;
  width: 0.7rem;
  height: 0.7rem;
  background-color: #999;
  border-radius: 50%;
  text-align: center;
  line-height: 0.7rem;
  /* cursor: pointer;
  background: rgba(0, 0, 0, 0.3); */
}
.imgInlineb  /deep/ img{display: inline-block;vertical-align: middle;}
.problemdDom /deep/ img{
  display: inline-block;
  vertical-align: middle;
}
.problemdDom /deep/ p{
  text-align: left!important;
}
.problemdDom /deep/ p img{
  display: block;
}
.problemdDom /deep/ .wscnph{
  display: block;
}
.isRight{
  color: #71DB77;
}
.isRightBg{
  background: rgba(113,219,119,0);
}
.isWrong{
  color: #FB806D;
}
.isWrongBg{
  background: rgba(251,128,109,0);
}
</style>
